<template>
  <view class="loading-container" :class="{ show: visible }">
    <!-- 骨架屏加载 -->
    <view v-if="type === 'skeleton'" class="skeleton-loading">
      <view class="skeleton-item" v-for="n in count" :key="n">
        <view class="skeleton-avatar"></view>
        <view class="skeleton-content">
          <view class="skeleton-line skeleton-title"></view>
          <view class="skeleton-line skeleton-text"></view>
          <view class="skeleton-line skeleton-text short"></view>
        </view>
      </view>
    </view>
    
    <!-- 圆形加载动画 -->
    <view v-else-if="type === 'spinner'" class="spinner-loading">
      <view class="spinner">
        <view class="spinner-dot" v-for="n in 8" :key="n" :style="{ transform: `rotate(${(n-1) * 45}deg)` }"></view>
      </view>
      <text v-if="text" class="loading-text">{{ text }}</text>
    </view>
    
    <!-- 波浪加载动画 -->
    <view v-else-if="type === 'wave'" class="wave-loading">
      <view class="wave-container">
        <view class="wave-dot" v-for="n in 5" :key="n" :style="{ animationDelay: `${(n-1) * 0.1}s` }"></view>
      </view>
      <text v-if="text" class="loading-text">{{ text }}</text>
    </view>
    
    <!-- 脉冲加载动画 -->
    <view v-else-if="type === 'pulse'" class="pulse-loading">
      <view class="pulse-circle">
        <view class="pulse-ring" v-for="n in 3" :key="n" :style="{ animationDelay: `${(n-1) * 0.6}s` }"></view>
      </view>
      <text v-if="text" class="loading-text">{{ text }}</text>
    </view>
    
    <!-- 默认加载动画 -->
    <view v-else class="default-loading">
      <view class="loading-spinner"></view>
      <text v-if="text" class="loading-text">{{ text }}</text>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class LoadingAnimation extends Vue {
  @Prop({ default: true }) visible!: boolean;
  @Prop({ default: 'default' }) type!: 'skeleton' | 'spinner' | 'wave' | 'pulse' | 'default';
  @Prop({ default: '加载中...' }) text!: string;
  @Prop({ default: 3 }) count!: number; // 骨架屏数量
}
</script>

<style lang="scss" scoped>
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  
  &.show {
    opacity: 1;
    visibility: visible;
  }
}

// 骨架屏加载
.skeleton-loading {
  width: 100%;
  padding: 40rpx;
  
  .skeleton-item {
    display: flex;
    margin-bottom: 40rpx;
    
    .skeleton-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeleton-loading 1.5s infinite;
      margin-right: 20rpx;
    }
    
    .skeleton-content {
      flex: 1;
      
      .skeleton-line {
        height: 24rpx;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: 4rpx;
        margin-bottom: 16rpx;
        
        &.skeleton-title {
          height: 32rpx;
          width: 60%;
        }
        
        &.skeleton-text {
          width: 100%;
          
          &.short {
            width: 40%;
          }
        }
      }
    }
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

// 圆形加载动画
.spinner-loading {
  text-align: center;
  
  .spinner {
    position: relative;
    width: 80rpx;
    height: 80rpx;
    margin: 0 auto 40rpx;
    
    .spinner-dot {
      position: absolute;
      top: 0;
      left: 50%;
      width: 8rpx;
      height: 8rpx;
      margin-left: -4rpx;
      background-color: #1890ff;
      border-radius: 50%;
      transform-origin: 50% 40rpx;
      animation: spinner-fade 1.2s linear infinite;
      
      &:nth-child(1) { animation-delay: -1.1s; }
      &:nth-child(2) { animation-delay: -1.0s; }
      &:nth-child(3) { animation-delay: -0.9s; }
      &:nth-child(4) { animation-delay: -0.8s; }
      &:nth-child(5) { animation-delay: -0.7s; }
      &:nth-child(6) { animation-delay: -0.6s; }
      &:nth-child(7) { animation-delay: -0.5s; }
      &:nth-child(8) { animation-delay: -0.4s; }
    }
  }
}

@keyframes spinner-fade {
  0%, 39%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

// 波浪加载动画
.wave-loading {
  text-align: center;
  
  .wave-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40rpx;
    
    .wave-dot {
      width: 16rpx;
      height: 16rpx;
      background-color: #1890ff;
      border-radius: 50%;
      margin: 0 8rpx;
      animation: wave-bounce 1.4s ease-in-out infinite both;
    }
  }
}

@keyframes wave-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

// 脉冲加载动画
.pulse-loading {
  text-align: center;
  
  .pulse-circle {
    position: relative;
    width: 80rpx;
    height: 80rpx;
    margin: 0 auto 40rpx;
    
    .pulse-ring {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 4rpx solid #1890ff;
      border-radius: 50%;
      animation: pulse-scale 1.8s ease-in-out infinite;
    }
  }
}

@keyframes pulse-scale {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

// 默认加载动画
.default-loading {
  text-align: center;
  
  .loading-spinner {
    width: 60rpx;
    height: 60rpx;
    border: 4rpx solid #f3f3f3;
    border-top: 4rpx solid #1890ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 40rpx;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 28rpx;
  color: #666;
  margin-top: 20rpx;
}
</style>